<template>
  <div v-if="bIsShow" class="login-layout fixed-full item-show translucent">
    <div class="login-box">
      <h3 class="login-box-title">
        <span>登录账号</span>
        <el-icon @click.stop="click2Close"><close/></el-icon>
      </h3>

      <!-- tel -->
      <div
        class="login-box-tel po-input po-input-left"
        :class="bIsTelTipsErr?'login-box-err':''"
        :data-afterContent="telTipsErr"
      >
        <input
          class="po-input-inner"
          v-model="tel"
          v-focus
          type="text"
          name="tel"
          placeholder="手机号码"
          @blur="check4Tel(tel)"
          @focus="bIsTelTipsErr=false"
          @keydown.enter="click2Login"
        >
        <span class="po-input-label">
          <el-icon><i class="jy-icon-phone"></i></el-icon>
        </span>
      </div>

      <!-- verifycode -->
      <div
        class="login-box-vcode"
        :class="bIsVCodeTipsErr?'login-box-err':''"
        :data-afterContent="verifyCodeTipsErr"
      >
        <div class="po-input">
          <input
            class="po-input-inner"
            v-model="verifyCode"
            type="text"
            name="verifyCode"
            placeholder="验证码"
            @blur="check4VerifyCode(verifyCode)"
            @focus="bIsVCodeTipsErr=false"
            @keydown.enter="click2Login"
          >
        </div>

        <div class="po-img" @click.stop="getVerifyCode">
          <span>
            <img :src="verifyCodePic" alt="">
          </span>
        </div>
      </div>

      <!-- vcode -->
      <div
        v-if="false"
        class="login-box-code"
        :class="bIsCodeTipsErr?'login-box-err':''"
        :data-afterContent="codeTipsErr"
      >
        <div class="po-input">
          <input
            class="po-input-inner"
            v-model="code"
            type="text"
            name="code"
            placeholder="动态密码"
            @blur="check4Code(code)"
            @focus="bIsCodeTipsErr=false"
          >
        </div>
        <button type="button" name="getCode" @click.stop="click2GetCode">
          <span>{{strCodeTips}}</span>
        </button>
      </div>

      <!-- password -->
      <div
        class="login-box-tel po-input po-input-left"
        :class="bIsPasswordTipsErr?'login-box-err':''"
        :data-afterContent="passwordTips">
        <input
          class="po-input-inner"
          v-model="password"
          :type="bIsPasswordShow ? 'text' : 'password'"
          name="password"
          placeholder="请输入密码"
          @blur="check4Password(password)"
          @focus="bIsPasswordTipsErr=false"
          @keydown.enter="click2Login">
        <span class="po-input-label" @click="bIsPasswordShow = !bIsPasswordShow">
          <i :class="bIsPasswordShow ? 'jy-icon-view' : 'jy-icon-preview'" style="font-size: 10px;"></i>
        </span>
      </div>

      <div class="login-box-login">
        <button type="button" name="login" @click.stop="click2Login">
          <span>登录</span>
        </button>
      </div>

      <div class="login-box-resetPassword">
        <a href="javascript:;" @click="click2ResetPassword">忘记密码</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import User from '@/api/user.js'
import { EventBus } from '@/store/index'
export default {
  data () {
    return {
      // bIsShow: false,
      tel: "",  // 手机号码：13888888888
      bIsTelTipsErr: false,
      telTipsErr: "",

      code: "",  // 动态密码：819812
      bIsCodeTipsErr: false,
      codeTipsErr: "",
      strCodeTips: "发送动态密码",

      /**
       * 验证码：防机器人刷登录，使用只能人为识别的字母数字变形组合
       * 登录成功或不成功都刷新验证码图片
       */
      verifyCode: "",  // 验证码：uQmw
      bIsVCodeTipsErr: false,
      verifyCodeTipsErr: "",
      verifyCodePic: "",

      // password
      password: "",
      bIsPasswordTipsErr: false,
      passwordTips: "",
      bIsPasswordShow: false,


      canSendCode: true,
      codeCount: 0,
      codeTimeiv: null
    };
  },
  props: ["bIsShow"],
  directives: {
    focus: {
      inserted: function(el) {
        el.focus();
      }
    }
  },
  created() {
    // const that = this;

    // 初始化 verifyCodePic
    this.getVerifyCode();

    // this.getVCode({
    //   code: 'CqWm',
    //   callback: function(data) {
    //     // set verifyCodePic
    //     console.log(data);
    //   },
    // });
  },
  methods: {
    ...mapActions("user", {
      login: "login",
      getVCode: 'getVCode',
    }),
    click2Close() {
      // 注册面板关闭
      // this.bIsShow = !this.bIsShow;
      this.$emit("close", false);
    },
    check4Tel(val) {
      if (!this.telReg(val)) {
        this.bIsTelTipsErr = true;
        this.telTipsErr = "手机号码格式不正确";
      }
    },
    check4Code(val) {
      if (val) {
        this.bIsCodeTipsErr = false;
        this.codeTipsErr = "";
      } else {
        this.bIsCodeTipsErr = true;
        this.codeTipsErr = "动态密码不正确";
      }
    },
    check4VerifyCode(val) {
      if (val) {
        this.bIsVCodeTipsErr = false;
        this.verifyCodeTipsErr = "";
      } else {
        this.bIsVCodeTipsErr = true;
        this.verifyCodeTipsErr = "验证码不正确";
      }
    },
    check4Password(val) {
      if (val) {
        this.bIsPasswordTipsErr = false;
        this.passwordTips = "";
      } else {
        this.bIsPasswordTipsErr = true;
        this.passwordTips = "密码不正确";
      }
    },
    telReg(val) {
      // 校验手机号码
      let reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
      return reg.test(val);
    },
    codeReg(val) {
      return !!val;
    },
    vCodeReg(val) {
      return !!val;
    },
    passwordReg(val) {
      return !!val;
    },
    click2GetCode() {
      let that = this;
      if(!that.telReg(that.tel) || !that.vCodeReg(that.verifyCode)) {
        if(!that.telReg(that.tel)) {
          this.check4Tel(that.tel);
        }
        if(!that.vCodeReg(that.verifyCode)) {
          this.check4VerifyCode(that.verifyCode);
        }

        return;
      }

      if (that.canSendCode && that.telReg(that.tel)) {
        // 手机号正确&&可发送验证码短信
        // TODO: post4Code
        that.post4Code();

        // count down, codeTimeiv 需要在 beforeUnmount 的时候 clearInterval
        that.codeCount = 90;
        if (that.codeTimeiv) clearInterval(that.codeTimeiv);
        that.codeTimeiv = setInterval(function() {
          that.strCodeTips = "重新发送(" + that.codeCount + "s)";
          that.codeCount--;
          if (that.codeCount < 0) {
            that.strCodeTips = "发送动态密码";
            clearInterval(that.codeTimeiv);
          }
        }, 1000);
      }
    },
    post4Code() {
      let that = this;
      let params = {
        phone: this.tel
      };
      User.getTelCode(params, res => {
        console.log(res);
        if (1 == res.code) {
          that.bIsTelTipsErr = true;
          that.telTipsErr = res.msg;
        } else if (0 == res.code) {
          // success
          that.bIsTelTipsErr = false;
        }
      });
    },
    click2Login() {
      let that = this;
      if (!that.telReg(that.tel) || !that.vCodeReg(that.verifyCode) || !that.passwordReg(that.password)) {
        if(!that.telReg(that.tel)) {
          this.check4Tel(that.tel);
        }
        if(!that.vCodeReg(that.verifyCode)) {
          this.check4VerifyCode(that.verifyCode);
        }
        if(!that.passwordReg(that.password)) {
          this.check4Password(that.password);
        }

        // 成不成功，都刷新验证码
        this.getVerifyCode();

        return;
      }

      let params = {
        phone: this.tel,  // 手机号码
        vcode: this.password,  // 静态密码
        // vcode: this.code,  // 动态密码
        code: this.verifyCode,  // 验证码
        callback: this.loginCallback
      };
      this.login(params);
    },
    loginCallback(res) {
      let that = this;

      // 成不成功，都刷新验证码
      this.getVerifyCode();

      if (0 == res.code) {
        that.bIsTelTipsErr = false;
        that.bIsCodeTipsErr = false;
        that.bIsPasswordTipsErr = false;
        this.$message(res.msg);
        that.click2Close();
      }
      else if (900003 == res.code) {
        that.bIsTelTipsErr = true;
        that.telTipsErr = res.msg;
      }
      else if (1 == res.code) {
        that.bIsTelTipsErr = true;
        that.telTipsErr = res.msg;
      }
      else if (910005 == res.code) {
        // that.bIsCodeTipsErr = true;
        // that.codeTipsErr = res.msg;

        that.bIsPasswordTipsErr = true;
        that.passwordTips = res.msg;
      }
      else if (910008 == res.code) {
        that.bIsVCodeTipsErr = true;
        that.verifyCodeTipsErr = res.msg;
      }
      else if (900106 == res.code) {
        that.bIsTelTipsErr = true;
        that.telTipsErr = res.msg;
      }
      // else if(910002 == res.code) {
      //   that.bIsEmailTipsErr = true;
      //   that.emailTipsErr = res.msg;
      // }
      else if (910003 == res.code) {
        that.bIsCodeTipsErr = true;
        that.codeTipsErr = res.msg;
      }
    },
    getVerifyCode() {
      const timestamp = new Date().valueOf();
      this.verifyCodePic = this.env.apiUrl + '/login/vcode?' + timestamp;
    },
    click2ResetPassword() {
      EventBus.$emit('ReserPasswordLayoutShow', true);
    },
  }
};
</script>

<style lang="scss">
@import "@/assets/css/common.scss";
.login-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.login-box {
  position: relative;
  box-sizing: border-box;
  width: 422px;
  height: 410px;
  background-color: #fff;
  border: 1px solid #a5afbe;
  border-radius: 2px;
  padding: 30px 35px;

  .login-box-title {
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;

    span {
      font-size: 30px;
      color: #43475c;
      font-weight: bold;
    }

    i {
      color: #aaaaaa;
    }
  }

  .login-box-tel {
    margin-bottom: 18px;
    background-color: #f3f5fa;
  }
  .login-box-err {
    color: #f8633b;
  }
  .login-box-err::after {
    position: absolute;
    font-size: 12px;
    bottom: -15px;
    color: #f8633b;
    content: attr(data-afterContent);
  }

  .login-box-code {
    position: relative;
    height: 46px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;

    .po-input {
      width: 230px;
      background-color: #f3f5fa;
    }

    button {
      outline: none;
      border-radius: 4px;
      border: 1px solid #a5afbe;
      background-color: inherit;
      background-image: none;
      width: 110px;
      height: 100%;
      font-size: 14px;
      color: #a5afbe;
    }
  }

  .login-box-vcode{
    position: relative;
    height: 46px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;

    .po-input {
      width: 110px;
      background-color: #f3f5fa;
    }

    .po-img {
      width: 230px;
      height: 100%;
      cursor: pointer;

      span {
        display: block;
        width: 100%;
        height: 100%;

        img{
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }

    button {
      outline: none;
      border-radius: 4px;
      border: 1px solid #a5afbe;
      background-color: inherit;
      background-image: none;
      width: 160px;
      height: 100%;
      font-size: 14px;
      color: #a5afbe;
    }
  }

  .login-box-login {
    position: relative;
    height: 46px;
    background: #127bff;
    border-radius: 4px;

    button {
      outline: none;
      border-radius: 4px;
      border: none;
      background-color: inherit;
      background-image: none;
      width: 100%;
      height: 100%;
      font-size: 18px;
      color: #fff;
    }
  }

  .login-box-resetPassword {
    position: relative;
    margin-top: 15px;
    text-align: center;
    // height: 46px;
    // background: #127bff;
    // border-radius: 4px;

    a {
      font-size: 12px;
      color: #aaa;

      &:hover {
        color: blue;
      }
    }
  }
}

.po-input {
  position: relative;
  display: flex;
  font-size: 14px;
  width: 100%;
  height: 46px;
  color: #606266;

  input.po-input-inner {
    display: inline-block;
    padding: 0 15px;
    min-width: 0;
    flex: 1;
    // width: 100%;
    // line-height: 40px;
    color: inherit;
    -webkit-appearance: none;
    outline: none;
    box-sizing: border-box;
    font-size: inherit;
    background-color: inherit;
    background-image: none;
    border-radius: 4px;
    border: none;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  span.po-input-label {
    position: absolute;
    height: 100%;
    top: 0;
    color: inherit;
    display: flex;
    align-items: center;

    i {
      font-size: 20px;
    }
  }
}
.po-input-left {
  input.po-input-inner {
    padding-left: 30px;
  }

  span.po-input-label {
    left: 5px;
  }
}
.po-input-right {
  input.po-input-inner {
    padding-right: 30px;
  }

  span.po-input-label {
    right: 5px;
  }
}
</style>
